<template>
    <div class="manageShare">
        <p>分享与嵌入</p>
        <hr>
        <h4>活 动 分 享</h4>
        <div class="shareList">
            <el-row type="flex" class="row-bg" justify="space-between">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <span>分享到<br>新浪微博</span>
                        <img src="../../assets/share_1.png">
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <span>分享到<br>QQ</span>
                        <img src="../../assets/share_2.png">
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <span>分享到<br>微信</span>
                        <img src="../../assets/share_3.png">
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formShare" style="margin-top:20px;margin-left:15px;">
            <el-form-item label="分享链接">
                <el-input v-model="formShare.url" style="width:85%;margin-left:-15px;"></el-input>
                <el-button type="primary" style="width:10%;margin-left:-5px;">一键复制</el-button>
            </el-form-item>
            <h4>活 动 嵌 入</h4>
            <el-form-item label="完全嵌入" style="margin-top:20px;">
                <el-input v-model="formShare.element" style="width:85%;margin-left:-15px;"></el-input>
                <el-button type="primary" style="width:10%;margin-left:-5px;">一键复制</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                labelPosition: 'top',
                formShare: {
                    url: 'http://e.suzzu.com/123456789',
                    element: '<iframe border="0" src="http://e.vhall,com/weinar/inituser/363156960"'
                },
            };
        },
        methods: {
        }
    }
</script>

<style s>
    * {
        margin: 0;
        padding: 0;
    }

    .manageShare{
        width: 88%;
        margin-top: 110px;
        margin-left: 95px;
        text-align: left;
    }

    .manageShare>p{
        border-left: 5px solid #62ACF4;
        font-size: 18px;
        text-align: left;
        padding-left: 10px;
    }

    .manageShare>hr{
        border-color: #DFDFDF;
        margin-top: 8px;
    }

    .manageShare>h4{
        margin-left: 15px;
        margin-top: 20px;
        font-size: 16px;
    }

    .shareList{
        width: 100%;
        margin-top: 10px;
        display: table;
    }

    .shareList>div{
        height: 140px;
        display: table-cell;
    }

    .grid-content {
        border-radius: 5px;
        min-height: 140px;
    }

    .bg-purple {
        border: 1px solid #DFDFDF;
        margin-right: 20px;
    }

    .shareList span{
        width: 70px;
        height: 30px;
        line-height: 30px;
        float: left;
        margin-top: 38px;
        margin-left: 20px;
    }

    .shareList img{
        float: right;
        margin-right: 20px;
        margin-top: 32px;
    }
</style>